<template>
  <div>
    <el-table :data="roleList" border>
      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="status" label="角色状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="permissionCount" label="权限数" />
      <el-table-column prop="addBy" label="添加人" />
      <el-table-column prop="addTime" label="添加时间" />
    </el-table>
    <div class="pagination-container">
      <el-pagination v-model:current-page="rolePage.current" v-model:page-size="rolePage.size" :total="rolePage.total" :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" @size-change="handleRoleSizeChange" @current-change="handleRoleCurrentChange" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const roleList = ref([
  {
    roleName: '销售人员',
    description: '销售',
    status: '启用',
    permissionCount: 8,
    addBy: '张三(zhangsan)',
    addTime: '2025-03-07 09:51:02'
  }
])

const rolePage = reactive({
  current: 1,
  size: 5,
  total: 1
})

const handleRoleSizeChange = (val) => {
  rolePage.size = val
}

const handleRoleCurrentChange = (val) => {
  rolePage.current = val
}
</script>

<style lang="scss" scoped></style>
